<template>
	<view class="h-fill">
		<u-navbar title="我的票券" titleColor="#fff" backIconColor="#fff" :background="navBg"></u-navbar>
		<view v-if="ticket" class="content t-mg uni-flex uni-column align-center">
			<view class="user-head">
				<image class="h-fill v-fill" :src="userInfo.avatar || 'https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/user.png'"></image>
			</view>
			<view class="uni-text-big" style="color: #FE8816;">{{ticket.name}}</view>
			<view class="uni-text-gray">请向店员出示二维码进行卡券核销</view>
			<canvas class="code-qrcode t-mg b-mg" canvas-id="qrcode" />
			<!-- <view class="uni-text-normal uni-bold">{{ticket.codeNum}}</view> -->
			<!-- <view class="uni-text-small t-mg">{{ticket.limit}}</view> -->
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	const weekDaysDic = {'1': '周一', '2': '周二', '3': '周三', '4': '周四', '5': '周五', '6': '周六', '7': '周日', '8': '周一~周日'};
	export default {
		data() {
			return {
				navBg: {
					'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)'
				},
				ticketId: null,
				ticket: null,
				validTime: null
			}
		},
		computed: mapState(['userInfo']),
		onLoad(options) {
			console.log('option', options)
			this.ticketId = options.id
			this.loadData()
		},
		async onPullDownRefresh() {
			await this.loadData()
			uni.stopPullDownRefresh()
		},
		methods: {
			async loadData() {
				try{
					this.ticket = await this.$http.getTicketDetail(this.ticketId);
					this.make();
					this.calcValidTime();
				}catch(e){
					this.$log("error", e);
				}
			},
			make() {
				this.$log('生成会员码');
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: 'https://test.the3dspace.cn/ticket-charge-off?ticketId=' + this.ticket.id,
					size: 160,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.defaults.correctLevel,
					success: res => {
						// console.log(res);
						this.codeReady = true;
					},
					fail: err => {
						this.$log('会员码生成出错', err);
					}
				})
			},
			calcValidTime() {
				var dayStr = "";
				var onlyOneDay = false;
				if (this.ticket.useStartDay && this.ticket.useEndDay) {
					let [year1, month1, day1] = this.ticket.useStartDay.split("-");
					let [year2, month2, day2] = this.ticket.useEndDay.split("-");
					if (year1 === year2 && month1 === month2 && day1 === day2) {
						dayStr = `仅限${month1}月${day1}日`;
						onlyOneDay = true;
					} else {
						dayStr = `${month1}-${day1}~${month2}-${day2}`;
					}
				} else if (this.ticket.useStartDay) {
					let [year, month, day] = this.ticket.useStartDay.split("-");
					dayStr = `${month}-${day}后`;
				} else if (this.ticket.useEndDay) {
					let [year, month, day] = this.ticket.useEndDay.split("-");
					dayStr = `${month}-${day}前`;
				}
				this.$log("day string", dayStr);
				var timeStr = "";
				if (this.ticket.useStartTime && this.ticket.useEndTime) {
					let [h1, m1, s1] = this.ticket.useStartTime.split(":");
					let [h2, m2, s2] = this.ticket.useEndTime.split(":");
					timeStr = `${h1}:${m1}~${h2}:${m2}`;
				} else if (this.ticket.useStartTime) {
					let [h, m, s] = this.ticket.useStartTime.split(":");
					timeStr = `${h}:${m}后`;
				} else if (this.ticket.useEndTime) {
					let [h, m, s] = this.ticket.useEndTime.split(":");
					timeStr = `${h}:${m}前`;
				}
				this.$log("time string", timeStr);
				var weekStr = "";
				if (!onlyOneDay && this.ticket.useWeek) {
					let weekDays = this.ticket.useWeek.split(",");
					if (weekDays.length === 7) {
						weekStr = "周一~周日";
					} else {
						let t = [];
						weekDays.forEach((item)=>{
							t.push(weekDaysDic[item]);
						});
						weekStr = t.join("、");
					}
				}
				this.validTime = `${dayStr} ${weekStr} ${timeStr}`.trim();
			},
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
		padding-top: 120rpx;
	}
	.code-qrcode {
		width: 160px;
		height: 160px;
	}
</style>
